//  该对象提供依赖收集功能depend  合派发更新功能notify
class Dep {
  constructor() {
    // this.id = i++;
    this.subs = []; // 存储的是与 当前 Dep 关联的 watcher
  }

  /** 添加一个 watcher */
  addSub(sub) {
    this.subs.push(sub);
  }
  /** 移除 */
  removeSub(sub) {
    for (let i = this.subs.length - 1; i >= 0; i--) {
      if (sub === this.subs[i]) {
        this.subs.splice(i, 1);
      }
    }
  }

  /** 将当前 Dep 与当前的 watcher ( 暂时渲染 watcher ) 关联*/
  depend() {
    // 就是将 当前的 dep 与当前的 watcher 互相关联
    if (Dep.target) {
      this.addSub(Dep.target); // 将 当前的 watcher 关联到 当前的 dep 上

      Dep.target.addDep(this); // 将当前的 dep 与 当前渲染 watcher 关联起来
    }
  }
  /** 触发与之关联的 watcher 的 update 方法, 起到更新的作用 */
  notify() {
    // 在真实的 Vue 中是依次触发 this.subs 中的 watcher 的 update 方法
    let deps = this.subs.slice();
    deps.forEach((item) => {
      item.update();
    });
  }
}

// 全局的容器存储渲染 Watcher
// let globalWatcher
// 学 Vue 的实现
Dep.target = null; // 这就是全局的 Watcher

let targetStark = [];
//  将当前watcher 放大全局
function pushTarget(target) {
  targetStark.unshift(Dep.target);
  Dep.target = target;
}
//  将当前watcher 踢出
function popTarget() {
  Dep.target = targetStark.shift();
}

/**
 * 在 watcher 调用 get 方法的时候, 调用 pushTarget( this )
 * 在 watcher 的 get 方法结束的时候, 调用 popTarget()
 */
